<template>
    <el-dialog
        :before-close="resetForm"
        :close-on-click-modal="false"
        :visible.sync="visible"
        append-to-body
        title="修改菜单排序"
        width="360px"
    >
        <div class="select_tree_div">
            <div class="page_tree" style="height: 500px;">
                <el-tree
                    ref="tree"
                    v-loading="loading"
                    :allow-drop="allowDrop"
                    :data="treeList"
                    :expand-on-click-node="false"
                    :props="defaultProps"
                    class="tree"
                    draggable
                    node-key="id"
                >
                    <div slot-scope="{ node, data }" style="width: 100%">
                        <div>{{ data.powerName }}</div>
                    </div>
                </el-tree>
            </div>
            <div class="tree_button_div">
                <el-button type="primary" @click="submit" v-loading.fullscreen.lock="loading">保 存</el-button>
                <el-button type="primary" @click="resetForm">取 消</el-button>
            </div>
        </div>
    </el-dialog>
</template>

<script>
export default {
    name: "powerSort",
    props: {
        visible: Boolean,
        data: Object | Array
    },
    data() {
        return {
            treeList: [],
            defaultProps: {
                children: 'childList',
                label: 'showName'
            },
            loading: false,
        }
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        },
        visible(newval, oldval) {
            if (newval) {
                this.treeList = JSON.parse(JSON.stringify(this.data));
            }
        }
    },
    methods: {
        allowDrop(draggingNode, dropNode, type) {
            if (draggingNode.level === dropNode.level) {
                if (draggingNode.parent.id === dropNode.parent.id) {
                    return type === "prev" || type === "next";
                }
            } else {
                return false;
            }
        },
        submit() {
            this.$emit('change', this.treeList);
            this.resetForm();
        },
        resetForm() {
            this.treeList = [];
            this.$emit('update:visible', false);
        },
    }
}
</script>

<style scoped>

</style>